<!-- 事件日志 --> 
<template>
  <div>
    <el-row>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }" >
        <div class="top">
            <el-button type="primary" style="float:right;margin-bottom: 10px;" @click="$router.go(-1)">返回</el-button>
        </div>
        <el-table stripe border :data="tableData" style="width: 100%; margin-top: 10px">
          <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
          <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
          <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
          <el-table-column label="服务名" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="显示名称" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="服务描述信息" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="启动类型" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="服务状态" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="可执行文件路径" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="文件厂商" prop="PrimArea"  show-overflow-tooltip></el-table-column>
          <el-table-column label="文件创建时间" prop="PrimArea" width="120"  show-overflow-tooltip></el-table-column>
          <el-table-column label="文件修改时间" prop="PrimArea" width="120"  show-overflow-tooltip></el-table-column>
        </el-table> 
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          :current-page=pageNum
          :page-size=pageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      title="处理结果" 
      v-el-drag-dialog @close="DealForm = {},$refs['DealForm'].resetFields();" width="30%">
      <el-form label-width="100px" :rules="rules" :model="DealForm" ref="DealForm">
        <el-form-item label="处理结果" prop="DealStatus">
          <el-select v-model="DealForm.DealStatus" placeholder="请选择状态">
            <el-option label="已解决" :value='1'></el-option>
            <el-option label="未解决" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理描述" prop="DealResult">
          <el-input placeholder="请输入处理描述"  type="textarea" :rows="3" v-model="DealForm.DealResult"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false,$refs['DealForm'].resetFields();">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import barchart from "../logAnalysis/components/barchart.vue";
import piechart from "../logAnalysis/components/piechart.vue";
import { parseTime, formatTime2, formatTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  components: { connsearch, barchart, piechart },
  data() {
    let that = this
    return {
      activeName: "",
      tabTitle: '按所在分区统计分析',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      logDialog: false,
      logList: [],
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      pie4Data: [],
      pie5Data: [],
      pie6Data: [],
      pie7Data: [],
      pie8Data: [],
      tableData:[],
      searchform:{},
      options:{},
      searchobj: {},
      formOptions: [
        {
          col: 8,
          label: "共享文件夹名称", // label文字
          labelWidth:'150px',
          prop: "SchoolName", // 字段名
          element: "el-input", // 指定elementui组件
          placeholder: "请输入共享文件夹名称,支持模糊查询。", // elementui组件属性
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.SchoolName = val
            }
          }
        },
      ],
      DealForm:{},
      rules:{
          DealStatus:{
            required: true, 
          },
          DealResult: [
            { 
              required: true, 
              message: '请输入处理描述', 
              trigger: 'blur' 
            },
            { 
              validator: (rule, value, callback) => {
                if (!value.trim()) {
                  callback(new Error('处理描述不能为空'));
                } else if (/^\s*$/.test(value)) {
                  callback(new Error('不能仅包含空格或换行'));
                } else {
                  callback();
                }
              }, 
              trigger: 'blur' 
            }
          ]
      },
      moderVisible:false,
      Moder:{},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
    let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
    let arr = [ parseTime(startTime), '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    this.$set(this.searchform,'timeRange', arr)
    // this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.GetSchoolStatusSumTree()
  },
  methods: {
    async openLink(row) {
      var links = 'toDesk://connect&' + row.UserID.replace(/\s/g, '') +'&' +row.Pwd
      window.open(links)
      let data = {
        Data: {
          AutoID:row.AutoID,
        }
      };
      const res = await connrequest('SetRemoteCtrlStatus', data);
      if (res.Status.StatusCode === 0) {
        this.getData();
      }
      
    },
    // 获取子节点的校区
    async lazyLoad(node, resolve){
      if(node.level < 3){
        resolve(node.data) 
      }else{
        const data = {
          Paging:{
            QueryPageNo: 1,
            QueryPageLength: 100000
          },
          Filter:{
            SecondArea: node.label,
          }
        }
        const res = await connrequest('GetSchool', data)
        let arr = []
        res.Data.map(item => {
          arr.push( {SubClass: item.SchoolName, value: item.SchoolID, level: 4, children: undefined} )
        })
        resolve(arr) 
      }
    },
    transformData(inputData) {
      const { RootName, PrimArea} = inputData;
        return {
          SubClass: RootName,
          value: RootName,
          level: 1,
          children: PrimArea.map(area => ({
            SubClass: area.PrimAreaName,
            value: area.PrimAreaName,
            level: 2,
            children: area.SecondArea.map(secondArea => ({
              SubClass: secondArea.SecondAreaName,
              value: secondArea.SecondAreaName,
              level: 3,
          }))
        }))
      }
    },
    // 获取校区树
    async GetSchoolStatusSumTree() {
      const res = await connrequest('GetSchoolStatusSumTree')
      this.formOptions.map( item => {
        if(item.label === '分区校区选择'){
          item.options = [this.transformData(res.Data)]
        }
      })
    },
    // 获取所有数据
    getData(){
      this.GetEventLog()
    },
    // 获取事件日志列表
    async GetEventLog(searchobj = {}){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          PrimArea: this.searchform?.SchoolName?.[1] || '',
          SecondArea: this.searchform?.SchoolName?.[2] || '',
          SchoolID: this.searchform.SchoolName?.[3] || '',
          DealStatus: this.searchform.DealStatus,
          ...searchobj
        }
      }
      
      const res = await connrequest('GetApplyRemoteCtrl', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = formatTime2(item.TransTime)
        item.DealTime = formatTime2(item.DealTime)
        return item
      })
      this.tableData = res.Data
      this.total = res.Paging?.TotalCount
    },
    // 立即处理
    async changeMailGlobal(row){
      this.DealForm={
        DealStatus : row.DealStatus ? 1 : 0 ,
        DealResult : row.DealDescp
      }
      this.Moder = row
      this.moderVisible = true
    },
    async submit(){
      this.$refs['DealForm'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              AutoID:this.Moder.AutoID,
              DealResult:this.DealForm.DealResult,
              DealStatus:this.DealForm.DealStatus
            }
          }
          // return
          const res = await connrequest('DealApplyRemoteCtrl', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success('确认成功')
            this.moderVisible = false
            this.getData()
          }
        }})
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchform = {...val}
      if(this.searchform.timeRange){
        this.searchobj = { StartTime: this.searchform?.timeRange[0] || '', EndTime: this.searchform?.timeRange[1] || '' }
      }
      this.getData()
    },
    // 重置
    reset(){
      this.$refs.connsearch.addInitValue()
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
      let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
      // let arr = [ parseTime(startTime), parseTime(xTime)]
      let arr = [ parseTime(startTime), '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }else if(item.label === "确认状态"){
          item.initValue = 0
        }else{
          item.initValue = ""
        }
        return item
      })
      this.searchform = {}
      this.$set(this.searchform,'DealStatus', 0)
      this.$set(this.searchform,'timeRange', arr)
      this.getData()
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetEventLog({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetEventLog({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
    handleClick() {
      this.tab = !this.tab
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
</style>